@mixin flex-column {
  display: flex;
  flex-direction: column;
}
@mixin flex-row {
  display: flex;
  flex-direction: row;
}
.maintner-goods-view {
  background: #fff;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-radius: 12px;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 24px;

    .span {
      font-size: 28rpx;
      color: #999;
      margin-right: 24px;
    }

    .em {
      font-size: 28rpx;
      color: #333;
    }
  }

  .distance {
    display: flex;
    align-items: center;

    .text {
      color: #333;
      font-size: 28px;
      margin-right: 20px;
    }
  }
}
.maintain-list-wrap {
  box-sizing: border-box;
  overflow-x: hidden;
  background: #f5f5f5;
	.loading-page{
		width: 100%;
		position: fixed;
		left:0;
		top:0;
		color:#666;
		font-size:34rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
  .hide {
    display: none;
  }
  .show {
    display: block;
  }
  .dialog-tips {
    display: flex;
    height: auto;
    width: 100vw;
    .at-float-layout__container {
      border-radius: 36rpx 36rpx 0px 0px;
      color: #333333;
      font-size: 42rpx;
      min-height: 200rpx;
    }
    .layout-body,
    .layout-body__content {
      min-height: 200rpx;
    }
    .layout-header {
      border-radius: 36rpx 36rpx 0px 0px;
      background-color: #ffffff;
    }
    &-wrap {
      &-head {
        .category-name {
          color: #ff7026;
        }
      }
      &-content {
        padding-bottom: 32rpx;
        .item {
          @include flex-row;
          align-items: center;
          box-sizing: border-box;
          height: 120rpx;
          padding: 0 24rpx;
          margin-top: 40rpx;
          border-radius: 12rpx;
          border: 1rpx solid #f5f5f5;
          &.is-check {
            border: 1rpx solid #12b3ff;
            .checked-icon {
              width: 44rpx;
              height: 44rpx;
              border-radius: 22rpx;
              background: url("./img/check-icon.png");
              background-size: contain;
            }
          }
          .checked-icon {
            width: 44rpx;
            height: 44rpx;
            border: 1rpx solid #e5e5e5;
            border-radius: 22rpx;
          }
          .cont {
            @include flex-row;
            &-left {
              .icon-img {
                width: 72rpx;
                height: 72rpx;
                margin-left: 24rpx;
                background-color: #eee;
              }
            }
            &-right {
              margin-left: 12rpx;
              &-top {
                color: #333333;
                font-size: 30rpx;
              }
              &-bottom {
                color: #999999;
                font-size: 22rpx;
              }
            }
          }
        }
      }
    }
  }

  .dialog-coupon {
    display: flex;
    height: auto;
    width: 100vw;
    .at-float-layout__container {
      border-radius: 36rpx 36rpx 0px 0px;
      color: #333333;
      font-size: 42rpx;
      min-height: 70vh;
    }
    .layout-body,
    .layout-body__content {
      min-height: 70vh;
    }
    .layout-body {
      padding: 20rpx 24rpx;
      background-color: #f7f4f8;
    }
    .layout-header {
      border-radius: 36rpx 36rpx 0px 0px;
      background-color: #ffffff;
    }
    &-wrap {
      &-content {
        box-sizing: border-box;
        padding-bottom: 32rpx;
        .item {
          @include flex-row;
          position: relative;
          align-items: center;
          height: 224rpx;
          width: 100%;
          border-radius: 12rpx;
          background-color: #ffffff;
          margin-bottom: 20rpx;
          .left {
            position: relative;
            @include flex-column;
            align-items: center;
            justify-content: center;
            width: 238rpx;
            height: 100%;
            &::after {
              position: absolute;
              content: "";
              top: -15rpx;
              right: -15rpx;
              width: 30rpx;
              height: 30rpx;
              border-radius: 15rpx;
              background-color: #f7f4f8;
            }
            .left-wrap {
              @include flex-column;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 168rpx;
              border-right: 1px dashed #e5e5e5;
              .money {
                font-size: 60rpx;
                color: #12b3ff;
              }
              .limit-money {
                font-size: 24rpx;
                color: #666666;
              }
            }
          }
          .right {
            position: relative;
            flex: 1;
            height: 100%;
            &::after {
              position: absolute;
              content: "";
              bottom: -15rpx;
              left: -15rpx;
              width: 30rpx;
              height: 30rpx;
              border-radius: 15rpx;
              background-color: #f7f4f8;
            }
            .right-wrap {
              @include flex-column;
              justify-content: space-between;
              box-sizing: border-box;
              height: 100%;
              width: 100;
              padding: 24rpx;
              font-size: 20rpx;
              .vip {
                color: #12b3ff;
                @include flex-row;
                .vip-icon {
                  width: 24rpx;
                  height: 24rpx;
                  background-size: contain;
                  margin-right: 4rpx;
                }
              }
              .coupon-name {
                font-size: 30rpx;
                color: #333333;
              }
              .bottom {
                @include flex-row;
                justify-content: space-between;
                align-items: flex-end;
                .at-button {
                  font-size: 24rpx;
                  border-radius: 12px;
                  padding: 0rpx 24rpx;
                  height: 54rpx;
                  line-height: 52rpx;
                }
                .tip {
                  display: inline-block;
                  color: #999999;
                  margin-bottom: 10rpx;
                }
              }
            }
          }
          .is-receive {
            position: absolute;
            top: 0;
            right: 30rpx;
            width: 124rpx;
            height: 124rpx;
            display: inline-block;
            background-size: contain;
          }
        }
      }
    }
  }
  .car-info {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  .nav-scroll {
    position: fixed;
    top: 92rpx;
    left: 0;
    width: 100vw;
    // overflow-x: scroll;
    .nav-scroll-wrap {
      width: 100vw;
      box-sizing: border-box;
    }
  }

  .narbar-wrap {
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    height: 88rpx;
    background-color: #ffffff;
    flex-shrink: 0;
    white-space: nowrap;
    overflow-x: auto;
    min-width: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    .item {
      color: #999999;
      font-size: 28rpx;
      box-sizing: border-box;
      // padding: 0 20rpx;
      &:not(:last-child) {
        margin-right: 30rpx;
      }
      display: inline-flex;
      height: 100%;
      align-items: center;
      .text {
        display: inline-block;
      }
      &.active {
        .text {
          display: inline-block;
          color: #12b3ff;
          font-size: 36rpx;
          position: relative;
          &::after {
            content: "";
            position: absolute;
            bottom: -8rpx;
            left: 0rpx;
            display: inline-flex;
            width: 100%;
            height: 4rpx;
            border-radius: 2rpx;
            background-color: #12b3ff;
          }
        }
      }
    }
  }
  .gift-rule-wrap {
    position: fixed;
    z-index: 99;
    bottom: 116rpx;
    padding-bottom: 20rpx;
    width: 100%;
    min-height: 30rpx;
    @include flex-row;
    @include flex-row;
    align-items: center;
    justify-content: center;
    .gift-rule {
      box-sizing: border-box;
      padding: 0 20rpx;
      width: 616rpx;
      min-height: 30rpx;
      font-size: 24rpx;
      color: #ff7026;
      background-color: #fffceb;
      border-radius: 12rpx 12rpx 0 0;
      &-text {
        box-sizing: border-box;
        width: 100%;
        padding-top: 8rpx;
        // padding-left: 110rpx;
      }
    }
  }

  .cart-wrap {
    position: fixed;
    z-index: 0;
    bottom: 32rpx;
    width: 100%;
    z-index: 100;
    background-color: transparent;
    @include flex-row;
    align-items: center;
    justify-content: center;
    .cart {
      @include flex-row;
      justify-content: space-between;
      width: 686rpx;
      height: 104rpx;
      border-radius: 52rpx;
      position: relative;
      background-color: #1287ff;
      background-image: linear-gradient(to right, #1287ff, #12b3ff);
      box-shadow: 0px 2rpx 10rpx 0px rgba(18, 179, 255, 0.8);
      .left {
        @include flex-row;
        align-items: center;
        margin-left: 32rpx;
        // .cart-img {
        //   margin-top: -38rpx;
        //   margin-left: 32rpx;
        //   width: 120rpx;
        //   height: 120rpx;
        //   object-fit: contain;
        // }
        .count {
          margin-top: 5rpx;
          margin-left: 12rpx;
          @include flex-column;
          color: #ffe065;
          font-size: 20rpx;
          .total {
            font-size: 42rpx;
            line-height: 0;
          }
          .origin-total {
            margin-left: 12rpx;
            font-size: 24rpx;
            color: #8ad9ff;
            line-height: 0;
            text-decoration: line-through;
          }
          .tip {
            margin-top: 5rpx;
            color: #fffefe;
          }
        }
      }
      .btn {
        width: 172rpx;
        height: 104rpx;
        line-height: 103rpx;
        text-align: center;
        border-radius: 52rpx;
        color: #ffffff;
        background-color: #12b3ff;
        font-size: 32rpx;
        &.disabled {
          color: #999999;
          background-color: #dddddd;
        }
      }
    }
  }
  .list-wrap {
    box-sizing: border-box;
    padding-top: 180rpx;
    .loading-animation {
      width: 100%;
      height: 64rpx;
      margin-top: 32rpx;
      position: relative;
      .at-loading__ring {
        border-width: 2px;
      }
    }
    .content-wrap {
      padding: 0 24rpx;
      padding-bottom: 220rpx;
      &-item {
        @include flex-column;
        display: inline-flex;
        width: 100%;
        background-color: #ffffff;
        margin-top: 20rpx;
        border-radius: 12rpx;
        &-head {
          @include flex-row;
          align-items: center;
          justify-content: space-between;
          height: 120rpx;
          padding: 0 24rpx;
          box-shadow: 0px 2rpx 0px #f5f5f5;

          .desc {
            font-size: 22rpx;
            color: #999999;
          }
          .left {
            @include flex-row;
            align-items: center;
            height: 100rpx;
            .checked-icon {
              width: 44rpx;
              height: 44rpx;
              border: 1rpx solid #e5e5e5;
              border-radius: 22rpx;
              &.is_check {
                width: 44rpx;
                height: 44rpx;
                background: url("./img/check-icon.png");
                background-size: contain;
              }
            }
            .title-info {
              display: inline-flex;
              flex-direction: row;
							align-items: center;
              .icon-img {
                width: 72rpx;
                height: 72rpx;
                margin-left: 24rpx;
                background-color: #eee;
              }
              .info {
                display: inline-flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 12rpx;
                .title {
                  font-size: 30rpx;
                  color: #333333;
                }
                .desc {
                  font-size: 22rpx;
                  color: #999999;
                }
              }
            }
          }
          .right {
            @include flex-row;
            align-items: center;
            height: 100%;
            font-size: 26rpx;
            .desc {
              color: #333333;
            }
            .coupon-btn {
              @include flex-row;
              align-items: center;
              padding: 0 24rpx;
              height: 100%;
              color: #ff7026;
              .icon {
                width: 36rpx;
                height: 36rpx;
                background: url("./img/coupon.png");
                background-size: contain;
                margin-right: 4rpx;
              }
            }
            // .input-num {
            //   @include flex-row;
            //   .number-action {
            //     width: 60rpx;
            //     height: 60rpx;
            //     line-height: 60rpx;
            //     text-align: center;
            //     font-size: 26rpx;
            //     font-weight: bold;
            //     color: #12B3FF;
            //     border: 1rpx solid #E5E5E5;
            //     &.down {
            //       border-radius: 6px 0px 0px 6px;
            //       border-right: 0;
            //     }
            //     &.up {
            //       border-radius: 0px 6px 6px 0px;
            //       border-left: 0;
            //     }
            //   }
            //   .number {
            //     width: 94rpx;
            //     height: 60rpx;
            //     border: 1rpx solid #E5E5E5;
            //     text-align: center;
            //     color: #333333;
            //     font-size: 22rpx;
            //   }
            // }
          }
        }
        &-eidt-wrap {
          @include flex-row;
          align-items: center;
          justify-content: space-between;
          height: 80rpx;
          padding: 0 24rpx;
          &.hide {
            display: none;
          }
          .title {
            @include flex-row;
            align-items: center;
            font-size: 26rpx;
            color: #333333;
          }
          .eidt {
            font-size: 26rpx;
            color: #12b3ff;
            .edit-btn,
            .save-btn {
              @include flex-row;
              align-items: center;
            }
            .edit-icon {
              width: 44rpx;
              height: 44rpx;
              background: url("./img/edit-icon.png");
              background-size: contain;
              margin-right: 4rpx;
            }
            .save-icon {
              width: 44rpx;
              height: 44rpx;
              background: url("./img/save-icon.png");
              background-size: contain;
              margin-right: 4rpx;
            }
          }
        }
        &-content {
          position: relative;
          &:after {
            position: absolute;
            content: "";
            left: 24rpx;
            bottom: 0;
            width: 100%;
            height: 2rpx;
            background-color: #f5f5f5;
          }
          &.edit-view {
            .item-info {
              padding: 0;
              .left {
                padding-left: 24rpx;
              }
              .right {
                height: 228rpx;
                @include flex-row;
                align-items: center;
                justify-content: space-between;
                .input-num {
                  @include flex-row;
                  .number-action {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 44rpx;
                    height: 44rpx;
                    line-height: 22rpx;
                    border-radius: 22rpx;
                    text-align: center;
                    border: 1px solid #f5f5f5;
                    &.down {
                      // border-radius: 6px 0px 0px 6px;
                      border-right: 0;
                    }
                    &.up {
                      background-color: #1287ff;
                      background-image: linear-gradient(
                        to right,
                        #1287ff,
                        #12b3ff
                      );
                      // border-radius: 0px 6px 6px 0px;
                      border-left: 0;
                    }
                  }
                  .number {
                    width: 60rpx;
                    height: 50rpx;
                    line-height: 48rpx;
                    text-align: center;
                    color: #333333;
                    font-size: 26rpx;
                    font-weight: bold;
                  }
                }
                .action-wrap {
                  @include flex-row;
                  align-items: center;
                  height: 100%;
                  .del {
                    display: inline-flex;
                    height: 40rpx;
                    color: #ff3b30;
                    font-size: 26rpx;
                    margin-right: 24rpx;
                  }
                  .exchange {
                    @include flex-row;
                    height: 100%;
                    width: 130rpx;
                    justify-content: center;
                    align-items: center;
                    color: #ffffff;
                    background-color: #12b3ff;
                  }
                }
              }
            }
          }
          .item-info {
            box-sizing: border-box;
            position: relative;
            @include flex-row;
            align-items: center;
            height: auto;
            width: 100%;
            padding: 24rpx;
            overflow: hidden;
            .left {
              display: flex;
              align-items: center;
              .annual-img {
                height: 180rpx;
                width: 180rpx;
                object-fit: cover;
                border-radius: 10rpx;
                background-color: #eee;
                opacity: 1;
                transition: opacity 0.3s linear;
              }
            }
            .right {
              box-sizing: border-box;
              min-height: 180rpx;
              margin-left: 24rpx;
              color: #333333;
              font-size: 26rpx;
              @include flex-column;
              flex: 1;
              .r-bottom-wrap {
                @include flex-column;
                flex: 1;
                justify-content: space-between;
                margin-top: 12rpx;
                .r-bottom {
                  // @include flex-column;
                  // justify-content: space-between;
                  // flex: 1;
                  &-t {
                    @include flex-row;
                    align-items: center;
                    color: #666666;
                    font-size: 20rpx;
                    .tag {
                      box-sizing: border-box;
                      max-width: 280rpx;
                      // word-break: break-all;
                      // text-overflow: ellipsis;
                      // white-space: nowrap;
                      // overflow: hidden;
                      padding: 3rpx 24rpx;
                      border-radius: 10rpx;
                      font-size: 24rpx;
                      margin-right: 12rpx;
                      background-color: #f5f5f5;
                    }
                  }
                  &-b {
                    @include flex-row;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 8rpx;
                    font-size: 20rpx;
                    color: #ff3b30;
                    .price {
                      font-size: 42rpx;
                      margin-right: 12rpx;
                    }
                    .origin-price {
                      font-size: 24rpx;
                      color: #999999;
                      text-decoration: line-through;
                    }
                    &-r {
                      align-self: flex-end;
                    }
                    .count {
                      font-size: 30rpx;
                      color: #333333;
                    }
                    .btn-wrap {
                      position: relative;
                      width: 162rpx;
                      height: 54rpx;
                      background-color: #12b3ff;
                      border-radius: 10rpx;
                      .btn {
                        position: absolute;
                        width: 162rpx;
                        height: 54rpx;
                        line-height: 53rpx;
                        text-align: center;
                        color: #ffffff;
                        font-size: 24rpx;
                        border-radius: 10rpx;
                        overflow: hidden;
                      }
                      .dotted {
                        position: absolute;
                        padding: 0 3rpx;
                        height: 32rpx;
                        line-height: 31rpx;
                        font-size: 22rpx;
                        min-width: 26rpx;
                        border-radius: 15rpx;
                        top: -15rpx;
                        right: 15rpx;
                        text-align: center;
                        background-color: #ff3b30;
                        color: #ffffff;
                      }
                    }
                  }
                }
                .r-bottom-r {
                  align-self: flex-end;
                  .btn-wrap {
                    position: relative;
                    width: 162rpx;
                    height: 54rpx;
                    background-color: #12b3ff;
                    border-radius: 10rpx;
                    .btn {
                      position: absolute;
                      width: 162rpx;
                      height: 54rpx;
                      line-height: 53rpx;
                      text-align: center;
                      color: #ffffff;
                      font-size: 24rpx;
                      border-radius: 10rpx;
                      overflow: hidden;
                    }
                    .dotted {
                      position: absolute;
                      height: 30rpx;
                      line-height: 30rpx;
                      font-size: 22rpx;
                      min-width: 30px;
                      border-radius: 15rpx;
                      top: -15rpx;
                      right: 15rpx;
                      text-align: center;
                      background-color: #ff3b30;
                      color: #ffffff;
                    }
                  }
                }
              }
            }
            &:after {
              position: absolute;
              content: "";
              left: 24rpx;
              bottom: 0;
              width: 100%;
              height: 2rpx;
              background-color: #f5f5f5;
            }
            &:last-child {
              &:after {
                position: absolute;
                content: "";
                height: 0rpx;
              }
            }
          }
        }
        &-bottom {
          @include flex-row;
          align-items: center;
          justify-content: space-between;
          height: 92rpx;
          padding: 0 24rpx;
          box-shadow: 0px -2rpx 0px #f5f5f5;
          font-size: 30rpx;
          color: #333333;
          &-left {
            @include flex-row;
            align-items: center;
            justify-content: flex-start;
          }
          .wage {
            color: #ff3b30;
          }
        }
      }
    }
  }
}
